<style lang="less">
  .coupon_box:hover{
    background: #e6e6e6;cursor:pointer;
  }
  .coupon_num_style{
    position: absolute;left: 35%;bottom: -22px;
  }
  .coupon_box_style {
    display:inline-block; float:left;border:1px solid #808080ba;width:212px;height:94px;position: relative;padding:8px 10px;margin:20px 15px
  }
  .coupon_box_style:hover{
    cursor:pointer;
  }
  .oldCoupon_box_style {
    display:inline-block; float:left;border:1px solid #808080ba;width:212px;height:94px;position: relative;padding:8px 10px;margin:20px 15px
  }
</style>
<template>
  <el-row>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="有效优惠券" name="1">
        <el-row class="row">
          <el-col :span="24">
            <div class="coupon_box_style"
                 v-for="(item, index) of couponArr" :key="index"
                 @click="showCouponDetail(item)"
                 :style="{'background': 'url(/api/ms-mongodb/file/download?fileId=' + item.couponsPic + ')', 'background-size': 'cover', 'background-repeat': 'no-repeat'}" >
              <span class="coupon_num_style"> x {{item.num}} 张</span>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="过期优惠券" name="2">
        <el-row class="row">
          <el-col :span="22">
            <div class="oldCoupon_box_style"
                 v-for="(item, index) of oldCouponArr" :key="index"
                 :style="{'background': 'url(/api/ms-mongodb/file/download?fileId=' + item.couponsPic + ')', 'background-size': 'cover', 'background-repeat': 'no-repeat'}" >
              <span class="coupon_num_style"> x {{item.num}} 张</span>
            </div>
          </el-col>
          <el-col :span="2" style="text-align: center" v-if="oldCouponArr.length">
            <el-button type="text" :loading="loading" @click="delAll"><span style="font-size:16px;font-weight:700;">清空</span></el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-row>
</template>

<script>
import {dotData} from '@/utils'
export default {
  name: 'show',
  data() {
    return {
      id: this.$route.params.id,
      activeName: '1',
      couponArr: [], // 有效劵 列表
      oldCouponArr: [], // 过期效劵 列表
      loading: false
    }
  },
  created() {
    // 有效优惠券列表
    this.getCouponList()
  },
  computed: {
  },
  methods: {
    handleClick(tab, event) {
      // console.log('tab', tab, 'event', event)
      if (tab.name === '2') {
        this.getOldCouponList()
      }
    },
    // 有效优惠券
    getCouponList() {
      this.$ajax.get('/ms-fahuobao-user/wallet/get-coupons', {state: '1'}).then(response => {
        if (response.success) {
          if (Array.isArray(response.data)) {
            this.couponArr = response.data || []
          }
        }
      })
    },
    // 过期优惠券
    getOldCouponList() {
      this.$ajax.get('/ms-fahuobao-user/wallet/get-coupons', {state: '0'}).then(response => {
        if (response.success) {
          if (Array.isArray(response.data)) {
            this.oldCouponArr = response.data || []
          }
        }
      })
    },
    delAll() {
      this.loading = true
      this.$ajax.post('/ms-fahuobao-user/wallet/delete-overdue-coupons').then(response => {
        const success = dotData(response, 'success')
        this.loading = false
        if (success) {
          this.$confirm('已清空', '提示', {
            type: 'success',
            confrimButtonText: '确定',
            showCancelButton: false,
            closeOnClickModal: false
          }).then(_ => {
            this.loading = false
            this.$router.push({path: '/ss-fhb/my-wallet/CouponList'})
          })
        } else {
          this.loading = false
        }
      }).catch(_ => {
        this.loading = false
      })
    },
    showCouponDetail(data) {
      this.$router.push({path: '/ss-fhb/my-wallet/coupon-show/' + data.couponsConfigId})
    }
  }
}
</script>
